<template>
  <div>
    <BlogCard v-for="item in data" :key="item.id">
      <template #header>
        <div class="userinfo">
          <UserInfoBar :user="item.user" :to="`/user/${item.user.userName}  `">
          </UserInfoBar>
        </div>
      </template>
      <div class="content" @click="goBlog(item.id)">
        <h2>{{ item.title }}</h2>
        <div v-html="item.content"></div>
      </div>
      <template #footer> </template>
    </BlogCard>
  </div>
</template>

<script setup lang="ts">
import { listBlog } from "@/api/blog";
import BlogCard from "@/components/BlogCard.vue";
import UserInfoBar from "@/components/UserInfoBar.vue";

import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const goBlog = (id: any) => {
  router.push({
    path: `/blog/${id}`,
  });
};

const props = defineProps({
  list: Array,
});

const data = computed(() => props.list);
</script>

<style scoped></style>
